import React, { useState, useEffect, Key } from "react"
import { useNavigate } from "react-router-dom"
import { Card, Button, Form, Input, Space, Table, Tooltip, message } from "antd"
import type { ColumnsType } from "antd/lib/table"
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import {
  reqHospitalSet,
  reqHospitalSetDelete,
  reqHospitalSetDeletes,
} from "@api/hospital/hospitalSets"
import {
  IHospitalSetsLsItem,
  IHospitalSetsLsType,
} from "@api/hospital/model/hospitalSetsType"

export default function HospitalSet() {
  // 设置状态
  // 储存医院列表信息
  const [hospitalSetsLs, sethospitalSetsLs] = useState<IHospitalSetsLsType>([])
  // 存储分页器当前页码
  const [page, setPage] = useState(1)
  // 存储分页器要跳转的页码
  const [pageSize, setPageSize] = useState(5)
  // 存储医院列表总数
  const [total, setTotal] = useState(10)
  // 存储load值
  const [load, setLoad] = useState(false)
  // 存储id数组
  const [idList, setIdList] = useState<Key[]>([])

  // 设置绑定form表单的hook
  const [form] = Form.useForm()
  // //设置控制表单checkbox按钮
  // const [selectionType] = useState<"checkbox">("checkbox")

  // 编程式导航，获取navigate
  const navigate = useNavigate()

  // 使用hook，模拟生命周期挂载，调用接口函数
  useEffect(() => {
    getReqHospitalSet(page, pageSize)
  }, [])

  // 把接口函数单独封装
  async function getReqHospitalSet(page: number, pageSize: number) {
    // 利用 form 获取其绑定的 form表单的数据
    const { hosname, hoscode } = form.getFieldsValue()
    // 让表格处于加载状态
    setLoad(true)
    // 调用axios封装的reqHospitalSet函数，访问医院列表接口获取数据
    const result = await reqHospitalSet({
      page: page,
      limit: pageSize,
      hosname,
      hoscode,
    })
    // 将page和pageSize存储起来
    setPage(page)
    setPageSize(pageSize)
    // 将接口返回的数据储存在状态中
    setTotal(result.total)
    sethospitalSetsLs(result.records)

    // 让表格处于加载完毕状态
    setLoad(false)
  }

  // 给 提交 按钮设置点击事件的回调函数
  const onFinish = () => {
    getReqHospitalSet(page, pageSize)
  }

  // 给 清空 按钮设置点击事件的回调函数
  const clearForm = () => {
    // 调用清空form表单的函数
    form.resetFields()
    // 调用查询接口函数
    getReqHospitalSet(page, pageSize)
  }

  // 给 添加 按钮设置点击事件的回调函数
  const goAddHospital = () => {
    navigate("/syt/hospital/hospitalSet/add")
  }

  // 给 修改 按钮设置点击事件的回调函数
  const goEditHospital = (value: any) => {
    console.log(value)
    navigate(`/syt/hospital/hospitalSet/edit/${value.id}`, {
      state: value,
    })
  }

  // 给 删除 按钮设置点击事件的回调函数
  const deleteHospital = async (id: number) => {
    await reqHospitalSetDelete(id)
    message.success("医院删除成功")
    getReqHospitalSet(page, pageSize)
  }

  // 给 选框 按钮设置点击事件的回调函数
  const setBatchDelButton = async (data: Key[]) => {
    // 将选中的 id 保存到 idList中
    setIdList(data)
  }

  // 给 批量删除 按钮设置点击事件的回调函数
  const deletesHospital = async () => {
    // 调用 批量删除 接口
    await reqHospitalSetDeletes(idList)
    getReqHospitalSet(page, pageSize)
    message.success("删除成功")
    setIdList([])
  }

  //设置表头
  const columns: ColumnsType<IHospitalSetsLsItem> = [
    {
      // 设置该列表头名称
      title: "序号",
      render: (_x, _y, index: number) => {
        return index + 1
      },
      // 设置该列表格宽度
      width: 80,
      // 设置该列表格居中
      align: "center",
    },
    {
      title: "医院名称",
      // 设置该列表格匹配的渲染数据
      dataIndex: "hosname",
      key: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
      key: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      // 该列要渲染的信息
      render: (value) => (
        <Space>
          <Tooltip placement="top" title={"修改医院"}>
            <Button
              icon={<EditOutlined />}
              type="primary"
              onClick={() => {
                goEditHospital(value)
              }}></Button>
          </Tooltip>
          <Tooltip placement="top" title={"删除医院"}>
            <Button
              icon={<DeleteOutlined />}
              type="primary"
              danger
              onClick={() => {
                deleteHospital(value.id)
              }}></Button>
          </Tooltip>
        </Space>
      ),
      // 固定定位该列表格
      fixed: "right",
      width: 120,
      align: "center",
    },
  ]

  // 渲染页面
  return (
    <div>
      {/* Card组件，用于添加白色背景 */}
      <Card>
        <Space direction="vertical" size="large">
          {/* Form表单组件，用于设置 查询功能 */}
          <Form
            name="basic"
            onFinish={onFinish} //绑定onFinish函数
            form={form} //绑定form的hook
            layout="inline">
            <Form.Item name="hosname">
              <Input placeholder="医院名称" />
            </Form.Item>
            <Form.Item name="hoscode">
              <Input placeholder="医院编号" />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                icon={<SearchOutlined />}>
                查询
              </Button>
            </Form.Item>
            <Form.Item>
              <Button onClick={clearForm}>清空</Button>
            </Form.Item>
          </Form>
          {/* 设置添加按钮 */}
          <Space>
            <Button type="primary" onClick={goAddHospital}>
              添加
            </Button>
            <Button
              type="primary"
              danger
              disabled={!idList.length}
              onClick={deletesHospital}>
              批量删除
            </Button>
          </Space>
        </Space>
        {/* 设置医院信息展示表格 */}
        <Table
          loading={load}
          // 设置表格的样式
          style={{ marginTop: 20 }}
          // 设置表格格式
          columns={columns}
          // 添加表格要渲染的数据
          dataSource={hospitalSetsLs}
          // 给表格主体没行设置key
          rowKey="id"
          // 设置表格的宽度以及让其滚动
          scroll={{ x: 1500 }}
          // 设置表格的内边框
          bordered={true}
          // 设置分页器
          pagination={{
            // 设置当前页数
            current: page,
            // 设置一页多少条
            pageSize,
            // 数据总数
            total,
            // 设置展示切换器
            showSizeChanger: true,
            // 指定每页可以显示多少条
            pageSizeOptions: [2, 5, 10],
            // 设置是否可以快速跳转
            showQuickJumper: true,
            // 获取分页器动态改变的数据
            onChange: getReqHospitalSet,
            // 设置总页数显示
            showTotal: (total) => {
              return `总数${total}`
            },
          }}
          // 添加选中按钮
          rowSelection={{
            type: "checkbox",
            onChange: setBatchDelButton,
          }}
        />
      </Card>
    </div>
  )
}
